<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Login</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{/vendor/bootstrap/css/bootstrap.min.css}">
    <link th:href="@{/vendor/fonts/circular-std/style.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/libs/css/style.css}">
    <link rel="stylesheet" th:href="@{/vendor/fonts/fontawesome/css/fontawesome-all.css}">
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            padding-top: 40px;
            padding-bottom: 40px;
        }

        body {
            /*
            background-image: url("/images/background2.jpg");
            */
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;
        }

        .imagebox {
            width: 150px;
            height: 150px;
        }
    </style>
</head>

<body>

<!-- login page  -->

<div class="splash-container">
    <div class="card ">
        <div class="card-header text-center">
            <div align="center">
                <a th:href="@{/}">
                    <img class="logo-img imagebox" th:src="@{/images/loginImg.png}" alt="logo">
                </a>
            </div>
            <span class="splash-description">Please enter your user information.</span>
        </div>
        <p align="center" style="color:red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
        <div class="card-body">
            <form th:action="@{/welcome}" th:method="post">
                <div class="form-group">
                    <input class="form-control form-control-lg" id="username" name="username" type="text"
                           th:placeholder="账号..." autocomplete="off">
                </div>
                <div class="form-group">
                    <input class="form-control form-control-lg" id="password" name="password" type="password"
                           th:placeholder="密码...">
                </div>
                <div class="form-group">
                    <label class="custom-control custom-checkbox">
                        <input class="custom-control-input" type="checkbox"><span class="custom-control-label">记住我</span>
                    </label>
                </div>
                <button type="submit" class="btn btn-primary btn-lg btn-block">登 录</button>
            </form>
        </div>
    </div>
</div>
<script th:src="@{/vendor/jquery/jquery-3.3.1.min.js}"></script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.js}"></script>
</body>

</html>
